<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <style>
        .file-upload{
            display: block;
            width:200px;
            height: 200px;
            border:1px solid #ccc;
            position: relative;
        }
        .file-upload input[type='file']{
            display: none;
        }
        .file-upload img{
            width:100%;
            height: 100%;
            object-fit: scale-down;
        }
        .file-upload .loading{
            position: absolute;
            width:100%;
            height: 100%;
            top:0px;
            left:0px;
            background: rgba(0,0,0,0.5);
            display: none;
        }
        .file-upload .loading > span{
            display: block;
            width:50px;
            height: 50px;
            /* background:red; */
            border:10px solid transparent;
            border-radius: 50%;
            border-top:10px solid blue;
            margin:70px auto;
            animation: rotate 1s linear 0s infinite;
        }

        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <form action="" id="myform">
        <input type="text" name="username">
        <br>
        <input type="text" name="tel">
        <br>
        <br>
        <label class="file-upload" id="showImg">
            <img src="img/upload.png" alt="" >
            <input type="file" id="file" onchange="changeImg(this)" name="pic">
            <div class="loading">
                <span></span>
            </div>

        </label>
    </form>
    <input type="button" value="发送数据" onclick="sendFormData()">
    <script>
        function changeImg(fileDom){
            // 文件选择器的DOM对象.files  文件信息列表的集合
            // console.log(fileDom.files);
            let file=fileDom.files[0];//文件对象
            let imgDom=document.querySelector("#showImg>img");
            imgDom.src=window.URL.createObjectURL(file);
        }
        function sendFormData(){
            let loadingDom=document.querySelector(".loading");
            loadingDom.style.display="block";
            // let fd=new FormData(form表单的DOM对象);//可将表单所有具有name的属性一一映射进来
            let fd=new FormData(document.getElementById("myform"));
            let imgDom=document.querySelector("#showImg>img");//图像的dom对象

            axios({
                url:"http://127.0.0.1:3000/test/upload",
                method:"post",
                data:fd

            }).then(function(res){
                console.log(res);
                imgDom.src=res.data.pic;
            }).catch(function(error){
                console.log(error);
            }).finally(function(){//最终会执行的
                loadingDom.style.display="none";
            });
        }
    </script>
</body>
</html>